<template>
  <div>
    <div @click="clickGoLiveDetail(item.classId)" class="c-pv24 c-flex-row c-bd-b1" :key="index" v-for="(item,index) in liveList">
      <div class="c-ww180 c-hh120 c-text-hidden c-p">
        <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.cover, require('../../assets/defult270.png'))" />
        <vip-status :item="item"></vip-status>
        <div class="c-pa c-p-b0 c-p-r0 c-fc-white c-fs20 theme-bg c-tag-br12 c-ph10 c-pv2" v-if="!(item.classStatus == 1 && !item.classBeginAt)">
          {{item.classStatus == 1 ? item.classBeginAt ? getTimeByDate(item.classBeginAt) + '开课' : '' : statusMap[item.classStatus]}}
        </div>
      </div>
      <div class="c-flex-column c-ml20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
        <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-lh34">{{item.name}}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center">
          <div v-if="item.payType == 1 || item.payType == 4" class="c-fs22 c-fc-xmlred c-fw600">免费</div>
          <div v-else-if="item.payType == 3" class="c-fs22 c-fc-xmlred c-fw600">加密</div>
          <div v-else class="c-fs26 c-fc-xmlred c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter(item.optimal)}}</span>{{item.payType | priceValueFilter(item.price, 115, item.optimal)}}</div>
          <div class="c-fs20 c-fc-gray">共{{item.detailNum}}节 | 限{{item.limitNum}}人</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "LiveItem",
  components: {
    vipStatus,
    CoverImg
  },
  props: {
    liveList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      statusMap: {
        2: "已开课",
        3: "已过期"
      },
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default"
    };
  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickGoLiveDetail(classId) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      this.iosAppRouteChange(toPath);
    },
    getTimeByDate: function (dateStr) {
      if (dateStr != '' && dateStr != null && dateStr != undefined) {
        let time = 0;
        let timeHead = dateStr.split(" ")[0].split("-");
        time = parseInt(timeHead[1]) + '月' + timeHead[2] + '日 ';
        return time;
      } else {
        return 0;
      }
    },
  }
};
</script>

<style scoped>
.c-pt22 {
  padding-top: 0.55rem;
}
.c-lh34 {
  line-height: 0.85rem;
}
.classList:last-child .c-flex-grow1 {
  border-bottom: none;
}
.c-tag-br12 {
  border-radius: 0.3rem 0 0.3rem 0;
}
</style>
